<template>
  <div>
    <div class="curr-page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>车辆详情</el-breadcrumb-item>
        <el-breadcrumb-item>{{ page_title }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 渲染内容 -->
      <div class="mt-4">
        <!-- 空内容 -->
        <div v-if="show_obj.name == null">
          <el-empty description="抱歉，当前车辆已丢失"></el-empty>
        </div>

        <div v-else>
          <!-- {{ show_obj }} -->
          <!-- info -->
          <div class="d-flex">
            <div><img :src="show_obj.icon" alt="" style="width:400px" /></div>
            <div class="ml-5 d-flex flex-column pb-5">
              <div>
                {{ show_obj.name }}

                <!-- 未预约，进行预约 -->
                <span
                  class="ml-3 text-red"
                  v-show="connect_state == 0"
                  @click="showConnectDialog = true"
                  >预约看车</span
                >

                <!-- 已预约，取消预约 -->
                <span
                  class="ml-3 text-red"
                  v-show="connect_state == 1"
                  @click="cancalConnect"
                  >正在预约</span
                >

                <!-- 预约成功 -->
                <span class="ml-3 text-red" v-show="connect_state == 2"
                  >预约成功</span
                >
              </div>
              <div class="mt-3">
                <span class="mr-2">车龄</span> {{ show_obj.age }}年
              </div>
              <div class="mt-3">
                <span class="mr-2">车龄</span>{{ show_obj.milage }}万公里
              </div>
              <div class="mt-3">
                <span class="mr-2">发动机类型</span
                >{{ show_obj.TransmissionType }}
              </div>
              <div class="mt-3">
                <router-link
                  :to="'/detail/shop/' + show_obj.shopId"
                  v-slot="{ navigate }"
                  v-show="show_obj.shopId"
                  custom
                >
                  <el-button @click="navigate" class="text-black" size="mini"
                    >进店逛逛</el-button
                  >
                </router-link>
              </div>
            </div>
          </div>

          <!-- images -->
          <div v-show="show_obj.detailPics.length != 0">
            <div class="mt-4 fs-xl">车辆图片</div>
            <div class="mb-5">
              <el-space wrap>
                <div
                  style="width: 240px;padding:0;margin-right:20px;margin-top:1.25rem"
                  v-for="(item, index) in show_obj.detailPics"
                  :key="index"
                >
                  <img :src="item.icon" alt="" style="width:240px" />
                  <div>{{ item.name || "无描述" }}</div>
                </div>
              </el-space>
            </div>
          </div>

          <!-- dialog 预约车辆对话框 -->
          <el-dialog
            v-model="showConnectDialog"
            title="预约表单"
            width="50%"
            destroy-on-close
          >
            <!-- 表单 -->
            <el-form
              :model="form"
              :rules="rules"
              :inline="false"
              size="normal"
              label-width="80px"
              ref="form"
            >
              <el-form-item label="内容">
                <el-input v-model="form.message"></el-input>
              </el-form-item>
            </el-form>

            <template #footer>
              <span>
                <el-button @click="showConnectDialog = false">取 消</el-button>
                <el-button type="primary" @click="addConnect">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {},
  },

  data() {
    return {
      show_obj: {},
      page_title: "",
      showConnectDialog: false,
      connect_state: 0,
      rules: [],
      form: {},
    };
  },

  methods: {
    // 页面初始化内容占位
    fetchInitData() {
      this.fetchShowObj();
    },

    // 获取渲染对象内容
    async fetchShowObj() {
      await this.$axios.get(`/car/${this.id}`).then((res) => {
        console.log(res);
        this.show_obj = res.data;
        this.page_title = this.show_obj.name;
      });
    },

    // 用户预约
    async addConnect() {
      // 警告
      this.$confirm(
        "预约看车，一旦预约不能修改，请谨慎操作,是否确认？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        // 确认
        .then(() => {
          // 发起预约请求

          this.$message({
            type: "info",
            message: "保存修改",
          });
        })
        // 取消
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },

    // 取消预约
    async cancalConnect() {
      // 警告
      this.$confirm(
        "预约看车，一旦预约不能修改，请谨慎操作,是否确认？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        // 确认
        .then(() => {
          // 发起预约请求

          this.$message({
            type: "info",
            message: "保存修改",
          });
        })
        // 取消
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  width: 1080px;
  margin: 0 auto;
  padding-top: 30px;
}
</style>
